<template>
    <div class="tape-wrap">
        <img src="../assets/audio_cd_bg.png" alt="" class="tape-img">
        <img src="../assets/audio_spin.png" alt="" class="spin-img spin-img-left">
        <img src="../assets/audio_spin.png" alt="" class="spin-img spin-img-right">
    </div>
</template>
<script type="text/javascript">
export default {
    name: 'y-tape'
}
</script>
<style type="text/css">
.tape-wrap {
     & .tape-img{
        width: 1.46rem;
        height: 1.08rem;
        position: relative;
    }
    & .spin-img{
        width: .26rem;
        height: .26rem;
        position: absolute;
        top: 1rem;
        animation: spin 4s linear infinite;
    }
    & .spin-img-left {
        left: 1rem;
    }
    & .spin-img-right {
        left: 1.6rem;
    }
 
}
@keyframes spin{
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
</style>


